<template>
  <div>
    <button @click="comName = 'MyLeft'">展示Left</button>
    <button @click="comName = 'MyRight'">展示Right</button>
    <!-- 动态组件，使用component标签关键是：is属性，属性值是组件名 -->
    <!-- 给动态组件套一层keep-alive，可以保持组件不被销毁，从而可以保持组建的状态 -->
    <!-- include="MyLeft,MyRight" 表示指定哪些组件需要保持状态，不指定的就不会被缓存了 -->
    <!-- exclude="MyLeft,MyRight" 表示指定哪些组件不需要保持状态，不指定的就会被缓存了 -->
    <keep-alive include="MyLeft,MyRight">
      <component :is="comName"></component>
    </keep-alive>
  </div>
</template>

<script>
import MyLeft from "@/components/MyLeft.vue";
import MyRight from "@/components/MyRight.vue";
export default {
  data() {
    return {
      comName: "MyLeft",
    };
  },
  components: {
    MyLeft,
    MyRight,
  },
};
</script>

<style></style>